.cs-cell{
    &:first-child {
        .cs-cell-wrapper {
            background-origin: border-box;
        }
    }
    &:last-child {
        background-image: linear-gradient(0deg, $color-grey, $color-grey 50%, transparent 50%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .cs-cell-mask {
        &:after {
            background-color: #000;
            content: " ";
            opacity: 0;
            position: absolute 0;
        }

        &:active:after {
            opacity: .1;
        }
      }
}
@component-namespace cs {
    @component cell {
      background-color: $color-white;
      box-sizing: border-box;
      color: inherit;
      min-height: toRem(48*1.8);
      display: block;
      overflow: hidden;
      position: relative;
      text-decoration: none;

      @descendent group{
        margin-top:toRem(40);
        margin-bottom:toRem(40);
      }

      @descendent wrapper {
        background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
        background-size: 120% 1px;
        background-repeat: no-repeat;
        background-position: top left;
        background-origin: content-box;
        align-items: center;
        box-sizing: border-box;
        display: flex;
        font-size: toRem(16*1.8);
        line-height: 1;
        min-height: inherit;
        overflow: hidden;
        padding: 0 10px;
        width: 100%;
      }

      @descendent text {
        vertical-align: middle;
      }

      @descendent label {
        color: #888;
        display: block;
        font-size: toRem(12*1.8);
        margin-top: toRem(6*1.8);
      }

      img {
        vertical-align: middle;
      }

      @descendent title {
        flex: 1;
        &>i{
          vertical-align: middle;
        }
      }

      @descendent value {
        color: $cell-value-color;
        display: flex;
        align-items: center;

        @when link {
          margin-right: toRem(24*1.8);
        }
      }

      @descendent left {
        position: absolute;
        height: 100%;
        left: 0;
        transform: translate3d(-100%, 0, 0);
      }

      @descendent right {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        transform: translate3d(100%, 0, 0);
      }

      @descendent allow-right::after {
        border: solid toRem(2*1.8) $border-color;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        position: absolute;
        top: 50%;
        right: toRem(20*1.8);
        size: toRem(5*1.8);
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }